﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DemoUpload.aspx.cs" Inherits="DemoUpload" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/ajaxupload.js"></script>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="Scripts/jquery.MultiFile.pack.js"></script>
    <link href="JCrop/css/jquery.Jcrop.min.css" rel="stylesheet" />
    <script src="JCrop/js/jquery.Jcrop.min.js"></script>
    <script src="JCrop/js/jquery.color.js"></script>

  <script type="text/javascript">
      jQuery(document).ready(function () {

          var thumb = jQuery("#imgpreview");
          var txtPicture = jQuery("#txtPicture");

          new AjaxUpload(thumb, {

              action: '/ImageUpload.axd',
              name: 'myFile',
              onSubmit: function (file, extension) {
                  if (!(extension && /^(jpg|png|jpeg|gif|bmp|JPG|PNG|JPEG|BMP|GIF)$/.test(extension))) {

                      alert('Only JPG, PNG or GIF files are allowed');
                      return false;
                  }

                  thumb.attr('src', '/uploads/images/bigloading.gif');

                  txtPicture.val('Loading...');
                  txtPicture.attr('disabled', true);
                  this.disable();

              },
              onComplete: function (file, response) {
                  thumb.load(function () {

                      thumb.unbind();

                  });
                  txtPicture.attr('disabled', false);
                  var resp = response;
                  resp = $(resp).html();
                  alert(resp);
                  thumb.attr('src', resp);
                  this.enable();

                  txtPicture.val(resp);
                  thumb.Jcrop({
                      onChange: showCoords,
                      onSelect: showCoords
                  });
              }
          });
      });
      function showCoords(c) {
          $('#x').val(c.x);
          $('#y').val(c.y);
          $('#x2').val(c.x2);
          $('#y2').val(c.y2);
          $('#w').val(c.w);
          $('#h').val(c.h);
      };

    </script>
    <script type="text/javascript">
        //    $(function () { $('#imgpreview').Jcrop(); });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        
    <img id="imgpreview"  runat="server"/>
        <br />
       
        <label>X1 <input type="text" size="4" id="x" name="x" runat="server" /></label>
	<label>Y1 <input type="text" size="4" id="y" name="y"  runat="server"/></label>
	<label>X2 <input type="text" size="4" id="x2" name="x2"  runat="server"/></label>
	<label>Y2 <input type="text" size="4" id="y2" name="y2" runat="server"/></label>
	<label>W <input type="text" size="4" id="w" name="w" runat="server"/></label>
	<label>H <input type="text" size="4" id="h" name="h" runat="server"/></label>

        <br />
        <br />
        <asp:TextBox ID="txtPicture" runat="server"></asp:TextBox>
        <asp:Button ID="btnCrop" runat="server"  OnClick="btnCrop_Click" Text="Crop"/>
        <br />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
   <asp:FileUpload ID="FileUpload1" runat="server" class="multi" accept="gif|jpg|png|bmp" />

        <asp:Button ID="btnUpload" runat="server" Text="Multi Upload" OnClick="btnUpload_Click" />
    </form>
</body>
</html>
